<template>
  <div class="header-layout">
    <home-header class="nav-header"></home-header>
    <div class="layout-content">
      <keep-alive :include="cachedPages">
        <router-view />
      </keep-alive>
    </div>
  </div>
</template>

<script>
import HomeHeader from './components/HomeHeader.vue'
import { mapGetters } from 'vuex'
// import { logout } from '@api/modules/user.js'

export default {
  name: 'LayoutMain',
  components: { HomeHeader },
  props: {},
  data() {
    return {
      showVip: false,
      vipTitle: '',
      expiredTime: '',
    }
  },
  computed: {
    ...mapGetters(['cachedPages', 'loginCount']),
    isFirstLogin() {
      return localStorage.userId && this.loginCount < 2
    },
  },
  created() {},
  methods: {
    logoutSuccess() {
      localStorage.removeItem('token')
      localStorage.clear()
      sessionStorage.clear()
      this.$store.commit('clearCommonAll')
      this.$router.replace('/login')
    },
    // onLogout() {
    //   this.$confirm('确定退出登录？', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'info',
    //   }).then(() => {
    //     logout().then(res => {
    //       if (res.status === 200) {
    //         this.$message.success('退出成功！')
    //         this.logoutSuccess()
    //       }
    //     })
    //   })
    // },
    onClose() {
      this.showVip = false
    },
  },
}
</script>

<style lang="scss" scoped>
.header-layout {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  .nav-header {
    position: absolute;
    z-index: 9;
    left: 0;
    top: 0;
    width: 100%;
  }
  // .layout-main {
  //   padding-top: 72px;
  //   flex: 1;
  //   height: 100%;
  //   width: 100%;
  //   position: relative;
  //   background-color: #e9f1fb;
  //   .layout-main-con {
  //     height: 100%;
  //     width: 100%;
  //     max-width: 1920px;
  //     margin: 0 auto;
  //     // padding: 20px;
  //     background-color: #fff;
  //     display: flex;
  //     align-items: stretch;
  //     .layout-con-left,
  //     .layout-con-left {
  //       position: relative;
  //       height: 100%;
  //     }
  //     .layout-con-right {
  //       flex: 1;
  //       width: 0;
  //       margin-left: 20px;
  //       border-radius: 5px;
  //       height: 100%;
  //       display: flex;
  //       flex-direction: column;
  //     }
  //   }
  // }
  .layout-content {
    padding-top: 118px;
    flex: 1;
    height: 100%;
    width: 100%;
    display: flex;
    position: relative;
  }
}
</style>
